<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="../../bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">

    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css">

    <link rel="stylesheet" href="../../outlink/selectpage.css" type="text/css">

    <link rel="stylesheet" href="../../outlink/demo.css"/>

    <link rel="stylesheet" href="../../outlink/test.css"/>

    <link rel="stylesheet" href="../../outlink/kuCity.css">

    <link rel="stylesheet" href="../../outlink/jquery.cxcalendar.css">

</head>
<body>

<div>
    <h4>
        <p th:bgcolor="red">登录后，请选择你需要操作</p>
    <a th:href="@{/index/hello2}">1.去选机票</a><br><br>
    <a th:href="@{/index/user1}">2.查看个人信息</a><br><br>
    <a th:href="@{/index/user2}">3.查看订单记录</a><br><br>
    <a th:href="@{/index/user3}">4.查看需求记录</a><br>
    </h4>
</div>

<br>
<br>
<div style="width: 100%;height:42px;"  >
    <p>
        <input type="button" id="loginbtn" name="loginbtn" class="btn btn-info" value="去登录"
               style="margin-right: 45%;float: right"/>
        <input type="button" id="addbtn" name="addbtn" class="btn btn-info" data-toggle="modal"
               data-target="#myAddModal" value="去注册" style="float: right"/>
    <div class="loginSuccess" id="loginSuccess" style="float: right;margin-right: 40%">
        <!--登录成功后显示用户信息-->
    </div>
    </p>

</div>

    <div style="margin-top: 30px;">
    </div>
</div>

<!--登录模态框-->
<div class="modal fade" id="myLoginModal" tabindex="-1" role="dialog"
     aria-labelledby="myLoginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;
                </button>
                <h4 class="modal-title" id="myLoginModalLabel">用户登录</h4>
            </div>
            <div class="modal-body">
                用户名：<input type="text" name="loginUsername" id="loginUsername" value=""/><br/>
                密&#12288;码：<input type="text" name="loginPassword" id="loginPassword" value=""/><br/>
                <input type="hidden" id="adddataid" value="0"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="loginform">
                    登录
                </button>
            </div>
        </div>
    </div>
</div>
<!--注册模态框-->
<div class="modal fade" id="myAddModal" tabindex="-1" role="dialog"
     aria-labelledby="myAddModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;
                </button>
                <h4 class="modal-title" id="myAddModalLabel">请输入用户信息</h4>
            </div>
            <div class="modal-body">
                用户名：<input type="text" name="dupusername" id="addusername" value=""/><br/>
                密&#12288;码：<input type="text" name="duppassword" id="addpassword" value=""/><br/>
                姓&#12288;名：<input type="text" name="duprealname" id="addrealname" value=""/><br/>
                年&#12288;龄：<input type="text" name="dupage" id="addage" value=""/><br/>
                性&#12288;别：<input type="text" name="dupsex" id="addsex" value=""/><br/>
                <input type="hidden" id="adddataid" value="0"/>
            </div>
            <div class="modal-footer">
                <a id="gogogo">已有账号，前往登录</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="addform"/>
                注册
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../outlink/drag-arrange.js"></script>

<script type="text/javascript" src="../../outlink/selectpage.js"></script>
<script type="text/javascript" src="../../outlink/b.selectpage.js"></script>
<script type="text/javascript" src="../../outlink/demo.js"></script>
<script type="text/javascript" src="../../outlink/kuCity.js"></script>
<script src="../../outlink/jquery.cxcalendar.js"></script>
<script src="../../outlink/jquery.cxcalendar.languages.js"></script>
<script src="../../outlink/jquery.cookie.js"></script>
<script th:inline="javascript">
    //设置cookie的方法封装
    function setCookie(c_name, value, expiredays) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + expiredays);
        document.cookie = c_name + "=" + escape(value) +
            ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
    }

    //用户登录
    $(function () {
        $('#loginform').click(function () {
            var loginusername = $("#loginUsername").val();
            var loginpassword = $("#loginPassword").val();
            var html = "";
            if (loginusername == "") {
                alert("请输入用户名");
                return false;
            } else if (loginpassword == "") {
                alert("请输入密码");
                return false;
            }
            var loginInfo = {
                username: loginusername,
                password: loginpassword
            };
            $.ajax({
                type: "post",
                url: "/login/index",
                data: JSON.stringify(loginInfo),
                contentType: "application/json; charset=utf-8",
                type: "json",       //后台处理后返回的数据格式
                success: function (data) {//ajax请求成功后触发的方法
                    if (data.status == 0) {
                        $('#myLoginModal').modal('hide');
                        setCookie("username", loginusername, 60 * 60 * 1000);
                        // var ss = [[${session.userName}]];   //session必须刷新一次网页才有，否则为null
                        if (data.data.uVip == 0) {
                            $('.vipxq').removeAttr("disabled"); //去除vip需求限制
                            html += "<a href='/index/userOrder'>" + " <span class=\"hidden-xs\" style='color: red;' >登录成功:&nbsp;&nbsp;</span>";
                            html += " <span class=\"hidden-xs userinfo\" id=\"uname\" style='color: black;font-size:35px '>" + loginusername + "</span>" + "</a>";
                        } else {
                            html += "<a href='/index/userOrder'>" + " <span class=\"hidden-xs\" style='color: black;'>登录成功:&nbsp;&nbsp;</span>";
                            html += " <span class=\"hidden-xs  userinfo\" id=\"uname\"  style='color: black;font-size:35px '>" + loginusername + "</span>" + "</a>";
                        }
                        $('#loginSuccess').html(html);
                        document.getElementById('loginbtn').value = "登出"; //登录成功修改为‘登出’文字
                        document.getElementById('addbtn').remove();  //登录成功移除注册按钮
                        // document.getElementById('loginbtn').id = 'loginoutbtn';

                    }
                    if (data.status == -1)
                        alert(data.msg);//弹出错误信息
                },
                error: function (data) {
                    alert("请求失败，请联系管理员")
                }
            });

        });
        $('#loginoutbtn').click(function () {

        })
    })
</script>
<script th:inline="javascript">

    //登录登出按钮点击
    $('#loginbtn').click(function () {
        var sss = document.getElementById("loginbtn");
        if (sss.defaultValue == "登录") {    //登录
            $('#myLoginModal').modal('show');
        } else {                            //登出
            $('#myLoginModal').modal('hide');
            setCookie("username", "", -1);  //登出时删除cookie并刷新网页
            window.location.reload();
        }
    })

    $('#userinfo').click(function () {
        var uname = document.getElementById("uname");
    })
    //新增用户
    $('#addform').click(function () {
        var addusername = $("#addusername").val();
        var addpassword = $("#addpassword").val();
        var addrealname = $("#addrealname").val();
        var addage = $("#addage").val();
        var addsex = $("#addsex").val();
        if (addusername == "") {
            alert("用户名不能为空");
            return;
        }
        if (addpassword == "") {
            alert("密码不能为空")
            return;
        }
        if (addrealname == "") {
            alert("姓名不能为空")
            return;
        }
        if (addage == "") {
            alert("年龄不能为空")
            return;
        }
        if (addsex == "") {
            alert("性别不能为空")
            return;
        }
        var addone = {
            "username": addusername,
            "password": addpassword,
            "sex": addsex,
            "name": addrealname,
            "age": addage
        };
        console.log(addone);
        $.ajax({
            type: "post",
            url: "../userinfo/add",
            data: JSON.stringify(addone),
            contentType: "application/json; charset=utf-8",
            type: "json",       //后台处理后返回的数据格式
            success: function (result) {//ajax请求成功后触发的方法
                if (result.status == 0) {
                    alert('新增用户成功');
                    $('#myAddModal').modal('hide');
                } else {
                    alert(result.msg)
                    // $('#myAddModal').modal('hide');
                }
            },
            error: function (result) {
                alert("新增用户失败")
            }
        });
    });
    //链接到登录模态框
    $('#gogogo').click(function () {
        $('#myAddModal').modal('hide');
        $('#myLoginModal').modal('show');
    })
</script>
</html>